<template>
  <div class="wrap">
    <van-notice-bar
      scrollable
      text="暂未找到您的信息，请提交您的个人信息并维护您的银行卡信息，方便我们线下进行打款。"
      left-icon="volume-o"
    />
    <p class="title">完善信息</p>
    <van-panel title="身份信息">
      <div class="list-item">
        <span class="name">用户名:</span>
        <span v-text="username"></span>
      </div>
       <van-field v-model.trim="mobile" onkeyup="value=value.replace(/\s/g,'')" clearable label="手机号" placeholder="请输入手机号" />
      <div class="list-item">
        <span class="name">身份证号:</span>
        <span v-text="idCard"></span>
      </div>
      <!-- <van-field v-model.trim="username" maxlength="20" disabled clearable label="用户名" placeholder="请输入用户名" />
      <van-field v-model.trim="mobile" onkeyup="value=value.replace(/\s/g,'')" clearable label="手机号" placeholder="请输入手机号" />
      <van-field v-model.trim="idCard" disabled clearable label="身份证号" placeholder="请输入身份证号" /> -->
    </van-panel>
    <van-panel title="银行卡信息" style="margin-top:10px">
      <van-field clearable label="开户行" v-model.trim="bank"  placeholder="请输入开户行" />
      <van-field clearable label="开户行地址" v-model.trim="bankAddress"  placeholder="请输入开户行地址" />
      <van-field clearable label="请输入卡号" v-model.trim="bankNum" onkeyup="value=value.replace(/\s/g,'')" placeholder="请输入卡号" />
    </van-panel>
    <van-divider style="font-size:12px">请务必确认所输入信息系本人银行卡信息且准确无误，若因输入错误造成的资金损失，由本人自行承担</van-divider>
    <div class="btn" @click="handleInfo">提交</div>
  </div>
</template>
<script>
import {
  NoticeBar,
  Panel,
  Field,
  DropdownMenu,
  DropdownItem,
  Divider,
} from "vant";
import { checkId, checkNum } from "./../utils/check";
import { getData } from "./../utils/api";
export default {
  name: "bankCardInfo",
  data() {
    return {
      username: sessionStorage.getItem("name"),
      idCard: sessionStorage.getItem("idCard"),
      mobile: "",
      bank: "",
      bankAddress: "",
      bankNum: ""
    };
  },
  methods: {
    handleInfo() {
      if (
        this.username == "" ||
        this.idCard == "" ||
        this.mobile == "" ||
        this.bank == "" ||
        this.bankAddress == "" ||
        this.bankNum == ""
      ) {
       alert("请您填写每一项信息");
      } else if (!checkNum(this.mobile)) {
        alert("请您填写正确的手机号");
      } else if (!checkId(this.idCard)) {
       alert("请您填写正确的身份证号");
      } else {
        getData({
          method: "bindShortDriver",
          dataBody: {
            driverName: this.username.replace(/\s*/g, ""),
            identityNo: this.idCard.replace(/\s*/g, ""),
            bankCardNo: this.bankNum.replace(/\s*/g, ""),
            openCardBank: this.bank.replace(/\s*/g, ""),
            mobile: this.mobile.replace(/\s*/g, ""),
            openCardBankName: this.bankAddress.replace(/\s*/g, ""),
            companyId: sessionStorage.getItem("companyId")
          }
        }).then(res => {
          sessionStorage.setItem("mobile", this.mobile);
          if (res.data.result.code != 0) {
            if (res.data.result.msg == "请求数据丢失，请重新登陆") {
                alert(res.data.result.msg)
                this.$router.push({ path: "/" });
            } else {
              alert(res.data.result.msg);
            }
          } else {
            this.$router.push({ path: "/bindSuccess" });
          }
        });
      }
    }
  },
  mounted() {}
};
</script>
<style scoped>
.wrap {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: rgb(248, 248, 248);
}
.title {
  padding: 10px 16px;
  color: #323233;
  font-size: 14px;
  margin: 0;
  color: rgba(69, 90, 100, 0.6);
}
.btn {
  margin: auto;
  width: 120px;
  height: 44px;
  border-radius: 22px;
  background: #0082d7;
  text-align: center;
  line-height: 44px;
  color: #fff;
  margin-top: 22px;
  box-shadow: 0px 0px 12px 0px rgba(23, 153, 238, 1);
}
.van-cell__title {
  color: #0082d7;
}
.list-item {
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
  padding: 10px 0px;
  margin-left: 16px;
  border-bottom: 1px solid #f4f4f4;
}
.name {
  display: inline-block;
  width: 85px;
}
</style>